<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="module">
        // import {
        //     createRenderer,
        //     render,
        //     h
        // } from '/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.js'
        import {
            // renderOptions,
            h,
            render
        } from "./runtime-dom.js"

        // render(h('div', 'hello'), document.body)
        // setTimeout(() => {
        //     render(null, document.body)
        // }, 2000);




        // 两个节点之间的diff,看两个元素是否是同一个元素，如果是则可以复用
        // 如果不是同一个元素 则直接删除老节点，创建新节点
        // const vnode = h('h1', { a: 1 }, 'hello')
        // const vnode2 = h('h1', {
        //     style: {
        //         color: 'yellow'
        //     }
        // }, 'world')
        // render(vnode, document.body)
        // setTimeout(() => {
        //     render(vnode2, document.body)
        // }, 2000);


        // const vnode = h('h1', { a: 1 }, 'hello')
        // const vnode2 = h('h1', {
        //     style: {
        //         color: 'yellow'
        //     }
        // }, [
        //     h('p', 'hello'),
        //     h('p', 'hello')
        // ])
        // render(vnode2, document.body)
        // setTimeout(() => {
        //     render(vnode, document.body)
        // }, 2000);


        // const vnode = h('h1', { a: 1 })
        // const vnode2 = h('h1', {
        //     style: {
        //         color: 'yellow'
        //     }
        // }, [
        //     h('p', 'hello'),
        //     h('p', 'hello')
        // ])
        // render(vnode2, document.body)
        // setTimeout(() => {
        //     render(vnode, document.body)
        // }, 2000);


        // const vnode = h('h1', { a: 1 },)
        // const vnode2 = h('h1', {
        //     style: {
        //         color: 'yellow'
        //     }
        // }, 'hello')
        // render(vnode2, document.body)
        // setTimeout(() => {
        //     render(vnode, document.body)
        // }, 2000);


        // const vnode = h('h1', {
        //     style: {
        //         color: 'yellow'
        //     }
        // }, [
        //     h('p', 'hello'),
        //     h('p', 'hello')
        // ])
        // const vnode2 = h('h1', {
        //     style: {
        //         color: 'yellow'
        //     }
        // }, 'hello')
        // render(vnode2, document.body)
        // setTimeout(() => {
        //     render(vnode, document.body)
        // }, 2000);

        // const vnode = h('div', [
        //     h('li', { key: 'a' }, 'a'),
        //     h('li', { key: 'b' }, 'b'),
        //     h('li', { key: 'c' }, 'c')
        // ])
        // const vnode2 = h('div', [
        //     h('li', { key: 'a' }, 'a'),
        //     h('li', { key: 'b' }, 'b'),
        //     h('li', { key: 'd' }, 'd'),
        //     h('li', { key: 'e' }, 'e')
        // ])
        // render(vnode, document.body)
        // setTimeout(() => {
        //     render(vnode2, document.body)
        // }, 2000);
        // const vnode = h('div', [
        //     h('li', { key: 'a' }, 'a'),
        //     h('li', { key: 'b' }, 'b'),
        //     h('li', { key: 'c' }, 'c')
        // ])
        // const vnode2 = h('div', [
        //     h('li', { key: 'd' }, 'a'),
        //     h('li', { key: 'e' }, 'b'),
        //     h('li', { key: 'b' }, 'd'),
        //     h('li', { key: 'c' }, 'e')
        // ])
        // render(vnode, document.body)
        // setTimeout(() => {
        //     render(vnode2, document.body)
        // }, 2000);


        // const vnode = h('div', [
        //     h('li', { key: 'a' }, 'a'),
        //     h('li', { key: 'b' }, 'b'),

        // ])
        // const vnode2 = h('div', [
        //     h('li', { key: 'a' }, 'a'),
        //     h('li', { key: 'b' }, 'b'),
        //     h('li', { key: 'c' }, 'c')
        // ])
        // render(vnode, document.body)
        // setTimeout(() => {
        //     render(vnode2, document.body)
        // }, 2000);

        // 新节点比老节点多，需要新增 「头部」
        // const vnode = h('div', [
        //     h('li', { key: 'a' }, 'a'),
        //     h('li', { key: 'b' }, 'b'),
        // ])
        // const vnode2 = h('div', [
        //     h('li', { key: 'c' }, 'c'),
        //     h('li', { key: 'a' }, 'a'),
        //     h('li', { key: 'b' }, 'b'),

        // ])
        // render(vnode, document.body)
        // setTimeout(() => {
        //     render(vnode2, document.body)
        // }, 2000);

        // const vnode = h('div', [
        //     h('li', { key: 'c' }, 'c'),
        //     h('li', { key: 'a' }, 'a'),
        //     h('li', { key: 'b' }, 'b'),

        // ])
        // const vnode2 = h('div', [
        //     h('li', { key: 'a' }, 'a'),
        //     h('li', { key: 'b' }, 'b'),

        // ])
        // render(vnode, document.body)
        // setTimeout(() => {
        //     render(vnode2, document.body)
        // }, 2000);



        const vnode = h('div', [
            h('h1', { key: 'a' }, 'a'),
            h('h1', { key: 'b' }, 'b'),
            h('h1', { key: 'c' }, 'c'),
            h('h1', { key: 'd' }, 'd'),
            h('h1', { key: 'e', style: { color: 'blue' } }, 'e'),
            h('h1', { key: 'Q' }, 'Q'),
            h('h1', { key: 'f' }, 'f'),
            h('h1', { key: 'g' }, 'g'),
        ])
        const vnode2 = h('div', [
            h('h1', { key: 'a' }, 'a'),
            h('h1', { key: 'b' }, 'b'),
            h('h1', { key: 'e', style: { color: 'green' } }, 'e'),
            h('h1', { key: 'c' }, 'c'),
            h('h1', { key: 'd' }, 'd'),
            h('h1', { key: 'h' }, 'h'),
            h('h1', { key: 'f' }, 'f'),
            h('h1', { key: 'g' }, 'g'),
        ])
        render(vnode, document.body)
        setTimeout(() => {
            render(vnode2, document.body)
        }, 2000);
    </script>
</body>

</html>